<template>
  <div class="msg-item">
    <div class="title">
      <div>
        <span class="msg-type" v-show="message.from == 'system'">系统</span>
        <span class="msg-username">{{message.username}}</span>
        <span class="post-date">{{message.postDate | formater}}</span>
      </div>
      <button 
        class="button-selected btn hover-style" 
        v-show="message.from !== 'system'" 
        @click="handleDelete"
        >删除</button>
    </div>
    <div class="content" :class="isContentTooHigh ? 'fold' : 'full' " ref="content" v-html="message.content">
    </div>
    <div class="unfold-btn" @click="toggle" v-show="isContentTooHigh">展开消息</div>
    <div class="unfold-btn" @click="toggle" v-show="isUnfold">折叠消息</div>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: Object,
      default: function() {
        return{
          id: 1,
          from: 'system',
          username: '系统公告',
          postDate: new Date().getTime() - 10 * 3600,
          content: '<p>这是系统公告</p>'
        }
      }
    }
  },
  data() {
    return {
      isContentTooHigh: false,
      isUnfold: false
    }
  },
  mounted() {
    this.isContentTooHigh = this.$refs.content.clientHeight > 120 ? true : false
  },
  methods: {
    toggle() {
      this.isContentTooHigh = !this.isContentTooHigh
      this.isUnfold = !this.isUnfold
    },
    handleDelete() {
      console.log(this.message.id)
      this.$emit('delete-item', this.message.id)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .msg-item 
    padding 15px 20px 
    box-sizing border-box
    border-bottom 1px solid #dbd3d3
    @media screen and (max-width 750px)
      padding 10px
      background $color-text-button
      margin-bottom 10px
      border-radius 3px
    .title 
      height 30px 
      display flex 
      align-items center
      justify-content space-between
      .btn 
        display flex 
        height 24px 
        padding 0 10px 
        align-items center
      .msg-type 
        padding 3px 5px 
        border-radius 3px 
        border 1px solid $color-theme-red 
        background rgba($color-theme-red, 0.102)
        margin-right 10px
      .msg-username 
        font-size 15px 
        font-weight 700
        margin-right 10px 
      .post-date 
        color $color-sub-grey
    .content 
      margin-top 10px
      line-height 20px
      &.fold 
        max-height 120px 
        overflow: hidden
      &.full 
        height auto
    .unfold-btn 
      color $color-theme-red 
      margin-top 10px
</style>